<template>
  <div class="mine">
    <div class="user-head">
      <div class="user-head-l">
        <div class="head-text" style="width:15%">
          创建日期
        </div>
        <div class="head-date">
          <el-date-picker v-model="queryList.startTime" @change="startTimeStatus" :picker-options="pickerOptionsStart" type="date" placeholder="开始日期">
          </el-date-picker>
        </div>
        <div class="head-text">
          至
        </div>
        <div class="head-date">
          <el-date-picker v-model="queryList.endTime" @change="endTimeStatus" :picker-options="pickerOptionsEnd" type="date" placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <div class="user-head-r">
        <div class="head-r-l">
          <div class="head-input">
            <el-input v-model="queryList.queryData" placeholder="名称查询"> </el-input>
          </div>
          <div class="head-button" @click="getUserData(queryList)">
            查询
          </div>
          <div class="head-button" @click="newAdd">
            新增
          </div>
          <div class="">
            <el-select v-model="app_idHome" v-if="showSelect" placeholder="请选择应用类型" @change="getSelectHome(app_idHome)">
              <el-option v-for="item in optionsAppid" :key="item.app_id" :label="item.name" :value="item.app_id"> </el-option>
            </el-select>
          </div>
        </div>
        <div class="head-r-r head-button" @click="exportClick">
          导出
        </div>
      </div>
    </div>
    <div class="mine-con">
      <el-table
        :selectable="true"
        v-loading="loading"
        ref="pageData.tableData"
        :data="pageData.tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column type="selection" show-overflow-tooltip header-align="center" min-width="1"> </el-table-column>
        <el-table-column label="企业名称" show-overflow-tooltip min-width="1">
          <template slot-scope="scope">{{ scope.row.user_name }}</template>
        </el-table-column>
        <el-table-column label="单位类型" show-overflow-tooltip min-width="1">
          <template slot-scope="scope">{{ scope.row.agent_id_type }}</template>
        </el-table-column>
        <el-table-column label="统一社会信用代码" show-overflow-tooltip min-width="1">
          <template slot-scope="scope">{{ scope.row.credi_code }}</template>
        </el-table-column>
        <el-table-column label="法人姓名" show-overflow-tooltip min-width="1">
          <template slot-scope="scope">{{ scope.row.agent_name }}</template>
        </el-table-column>
        <el-table-column prop="legal_id_number" label="法人证件号" show-overflow-tooltip min-width="1"> </el-table-column>
        <el-table-column prop="update_time" label="创建日期" show-overflow-tooltip min-width="1"> </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip header-align="center" min-width="2">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.status == '0' ? true : false" @click="dialogEdit(scope.row)">修改</el-button>
            <el-button v-show="scope.row.status == '1'" @click="dialogLocking(scope.row)">
              锁定
            </el-button>
            <el-button class="activeBut" v-show="scope.row.status == '0'" @click="dialogUnlock(scope.row)">
              解锁
            </el-button>
            <el-button @click="contClick(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :pager-count="5"
            @current-change="handleCurrentChange"
            :page-size="pageData.pageSize"
            layout="prev, pager, next, jumper"
            :total="pageData.total"
            :current-page.sync="pageData.currentPage"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 增加的弹框 -->
    <el-dialog title="新增" :visible.sync="dialogFormAdd" id="add">
      <el-form :model="addUser" ref="addUser">
        <el-form-item label="企业名称">
          <el-input v-model="addUser.user_name" placeholder="请输入企业名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位类型">
          <el-select v-model="addUser.unit_type" clearable placeholder="请选择单位类型">
            <el-option v-for="item in typeList" placeholder="请输入单位类型" :key="item.key" :label="item.value" :value="item.key"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用名称">
          <el-select v-model="addUser.app_id" clearable placeholder="请选择应用名称">
            <el-option v-for="item of optionsAppid" placeholder="请输入应用名称" :key="item.app_id" :label="item.name" :value="item.app_id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区编码">
          <div class="block">
            <el-cascader
              style="width:70%"
              placeholder="请输入地区编码"
              :props="{ value: 'area_code', label: 'label' }"
              v-model="addUser.area_code"
              :options="optionsTree"
              @change="handleChange"
            ></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="经办人姓名">
          <el-input v-model="addUser.agent_name" placeholder="请输入经办人姓名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="经办人电话">
          <el-input v-model="addUser.agent_phone" maxlength="11" placeholder="请输入经办人电话" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="经办人证件类型">
          <el-select v-model="addUser.agent_id_type" clearable placeholder="请选择证件类型">
            <el-option v-for="item in this.cardList" placeholder="请输入单位类型" :key="item.key" :label="item.value" :value="item.key"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经办人证件号">
          <el-input v-model="addUser.agent_id_number" maxlength="18" placeholder="请输入经办人证件号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="经办人邮箱">
          <el-input v-model="addUser.agent_email" maxlength="18" placeholder="请输入经办人邮箱" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码">
          <el-input v-model="addUser.credi_code" placeholder="请输入统一社会信用代码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="法人姓名">
          <el-input v-model="addUser.legal_name" placeholder="请输入法人姓名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="法人证件类型">
          <el-select v-model="addUser.legal_id_type" clearable placeholder="请选择证件类型">
            <el-option v-for="item in this.cardList" placeholder="请输入单位类型" :key="item.key" :label="item.value" :value="item.key"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="法人证件号">
          <el-input v-model="addUser.legal_id_number" maxlength="18" placeholder="请输入法人证件号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="法人邮箱">
          <el-input v-model="addUser.legal_email" maxlength="18" placeholder="请输入法人邮箱" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="法人手机号" class="phone">
          <el-input v-model="addUser.legal_phone" maxlength="11" placeholder="请输入法人手机号" autocomplete="off"></el-input>
          <div class="send" @click="getCode()">{{ timeCode.txt }}</div>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input autocomplete="off" v-model="addUser.code" placeholder="请输入手机验证码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="width:280px;padding:13px" @click="AddNewUser">确 认</el-button>
      </div>
    </el-dialog>

    <!-- 修改的弹框 -->
    <el-dialog title="修改" :visible.sync="dialogFormEdit" id="edit">
      <el-form :rules="rules">
        <el-form-item label="企业名称">
          <el-input v-model="editList.user_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位类型">
          <el-select v-model="editList.unit_type" clearable placeholder="请选择">
            <el-option v-for="item in typeList" :key="item.key" :label="item.value" :value="item.key"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用名称">
          <el-select v-model="editList.app_id" clearable placeholder="请选择单位类型">
            <el-option v-for="item of optionsAppid" placeholder="请输入单位类型" :key="item.app_id" :label="item.name" :value="item.app_id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="统一社会信用代码">
          <el-input v-model="editList.credi_code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="法人姓名">
          <el-input v-model="editList.legal_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="法人证件号">
          <el-input v-model="editList.legal_id_number" maxlength="18" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="法人手机">
          <el-input v-model="editList.legal_phone" maxlength="11" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEdit = false" style="width:100px">取 消</el-button>
        <el-button type="primary" @click="editDetermine" style="width:100px;margin-left:30px">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看的弹框 -->
    <el-dialog title="查看" :visible.sync="dialogTable">
      <table id="dialogTable">
        <tr>
          <td>企业名称</td>
          <td>{{ contList.user_name }}</td>
        </tr>
        <tr>
          <td>单位类型</td>
          <td>{{ contList.agent_id_type }}</td>
        </tr>
        <tr>
          <td>统一社会信用代码</td>
          <td>{{ contList.legal_id_number }}</td>
        </tr>
        <tr>
          <td>法人姓名</td>
          <td>{{ contList.agent_name }}</td>
        </tr>
        <tr>
          <td>法人证件号</td>
          <td>{{ contList.agent_id_number }}</td>
        </tr>
        <tr>
          <td>法人手机</td>
          <td>{{ contList.agent_phone }}</td>
        </tr>
      </table>
    </el-dialog>
    <!-- 图形验证码的弹框 -->
    <el-dialog title="图形验证码" :visible.sync="dialogImg" :close-on-click-modal="false" :modal-append-to-body="false">
      <img class="httpImg" @click="httpImgClick" :src="httpImg" alt="Img" />
      <el-form :rules="rules">
        <el-form-item label="">
          <el-input v-model="imgCode"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImg = false" style="width:100px">取 消</el-button>
        <el-button type="primary" @click="dialogImgClick" style="width:100px;margin-left:30px">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    var validatePhone = (rule, value, callback) => {
      // 验证账号
      const phone = /^1[34578]\d{9}$/
      // 验证手机号
      if (value === '') {
        callback(new Error('请正确填写手机号'))
      } else if (!phone.test(value)) {
        callback(new Error('请输入有效的手机号'))
      } else {
        this.timeCode.disabled = false
        callback()
      }
    }
    return {
      rules: {
        phone: [{ validator: validatePhone, trigger: 'blur' }]
      },
      timeCode: {
        // 短信验证码
        txt: '发送',
        time: 60,
        disabled: false
      },
      formLabelWidth: '120px',
      queryList: {
        startTime: '', //查询的时候的开始时间
        endTime: '', //查询的时候结束时间
        queryData: '' //查询信息
      },
      labelPosition: 'right', // 表单在一行
      loading: false,
      pageData: {
        tableData: [],
        currentPage: 1, //当前的页数
        pageSize: 8, //每一页存放的数据条数
        total: 0
      },
      contList: {}, //内容数据
      dialogFormAdd: false, //新增弹框
      dialogFormEdit: false, //修改弹框
      dialogTable: false, //查看用户信息
      editList: {}, // 修改用户信息
      addUser: {
        // 新增用户
        agent_email: '',
        agent_id_number: '',
        agent_id_type: '',
        agent_name: '',
        agent_phone: '',
        app_id: '',
        area_code: '',
        code: '',
        credi_code: '',
        description: '',
        legal_email: '',
        legal_id_number: '',
        legal_id_type: '',
        legal_name: '',
        legal_phone: '',
        unit_type: '',
        user_name: ''
      },
      lockList: {}, // 锁定用户数组
      butStatus: {
        // 按钮锁定状态
        disabledStatus: false,
        status: true,
        userId: [],
        text: '解锁'
      },
      typeList: [],
      cardList: [],
      optionsTree: [],
      // 刚进页面获取appid
      app_idHome: '',
      optionsAppid: [],
      httpUrl: 'http://192.168.1.10/api', // 请求头
      // 时间选择器校验
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.queryList.endTime
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.queryList.startTime
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime()
          }
        }
      },
      // 图形弹框
      dialogImg: false,
      imgCode: '',
      httpImg: '',
      // appid显示与隐藏
      showSelect: false
    }
  },
  methods: {
    // 切换应用
    getSelectHome(val) {
      // console.log(val)
      this.app_idHome = val
      this.getUserData()
    },
    // 时间选择器起始时间校验
    // 时间开始选择器
    startTimeStatus(value) {
      this.queryList.startTime = value
    },
    // 时间结束选择器
    endTimeStatus(value) {
      this.queryList.endTime = value
    },
    // 获取三级联动最后一个元素
    handleChange(value) {
      this.addUser.area_code = value.pop()
    },
    //数据单选
    toggleSelection(rows) {
      console.log(rows)
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    //全选和全不选
    handleSelectionChange(val) {
      console.log(val)
    },
    //点击左右跳转页码
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageData.currentPage = val
    },
    //点击跳转对应的页码
    handleCurrentChange(val) {
      console.log(val)
      this.pageData.currentPage = val
      this.getUserData()
    },
    // 点击查看用户信息
    async contClick(res) {
      this.dialogTable = true
      console.log(res)
      const params = {
        app_id: res.app_id,
        user_id: res.user_id
      }
      const idx = JSON.stringify(params)
      const data = await this.http.post(`/web/user/company/user_info?access_token=${this.token}`, idx)
      const list = data.data
      this.contList = list.company_user_info
    },
    // 锁定用户操作
    async dialogLocking(res) {
      console.log(res)
      this.lockList = res
      const params = {
        app_id: this.lockList.app_id,
        user_id: this.lockList.user_id
      }
      const idx = JSON.stringify(params)
      const data = await this.http.post(`web/user/company/lock?access_token=${this.token}`, idx)
      if (data.result_code == '0') {
        this.$message({
          message: '信息锁定成功！',
          type: 'success'
        })
        this.getUserData()
      } else {
        this.$message({
          message: '信息锁定失败！',
          type: 'error'
        })
      }
    },
    // 解锁用户
    async dialogUnlock(res) {
      console.log(res)
      this.lockList = res
      const params = {
        app_id: this.lockList.app_id,
        user_id: this.lockList.user_id
      }
      const idx = JSON.stringify(params)
      const data = await this.http.post(`/web/user/company/unlock?access_token=${this.token}`, idx)
      if (data.result_code == '0') {
        this.$message({
          message: '信息解锁成功！',
          type: 'success'
        })
        this.getUserData()
      } else {
        this.$message({
          message: '信息解锁定失败！',
          type: 'error'
        })
      }
    },
    // 修改用户
    async dialogEdit(res) {
      this.dialogFormEdit = true
      const search = {
        page: this.pageData.currentPage,
        size: 8,
        user_name: res.user_name,
        app_id: this.app_idHome
      }
      const sea = JSON.stringify(search)
      const datas = await this.http.post(`/web/user/personal/user_list?access_token=${this.token}`, sea)
      this.editList = datas.data.records[0]
      const data = await this.http.get(`/web/user/company/unit_type_list?access_token=${this.token}`)
      this.typeList = data.data.unit_types
    },
    async editDetermine() {
      const params = {
        app_id: this.editList.app_id,
        user_id: this.editList.user_id,
        user_name: this.editList.user_name,
        credi_code: this.editList.credi_code,
        legal_id_number: this.editList.legal_id_number,
        legal_name: this.editList.legal_name,
        legal_phone: this.editList.legal_phone,
        unit_type: this.editList.unit_type
      }
      const idx = JSON.stringify(params)
      const data = await this.http.post(`/web/user/company/edit?access_token=${this.token}`, idx)
      console.log(data)
      if (data.result_code == '0') {
        this.$message({
          message: '信息修改成功！',
          type: 'success'
        })
      } else {
        this.$message({
          message: '信息修改失败！',
          type: 'error'
        })
      }
      this.getUserData()
      this.dialogFormEdit = false
    },
    // 导出Excel
    async exportClick() {
      if (this.app_idHome) {
        window.open(`${this.httpUrl}/web/user/company/export_excel?access_token=${this.token}&appId=${this.app_idHome}`)
      } else {
        this.$message({
          message: '暂无数据！',
          type: 'error'
        })
      }
    },
    // 新增用户
    async newAdd() {
      this.addId() // 获取appid
      this.dialogFormAdd = true
      const Tree = await this.http.get(`/web/area/area_tree?access_token=${this.token}`)
      console.log(data)
      this.optionsTree = Tree.data[0].children
      const data = await this.http.get(`/web/user/company/unit_type_list?access_token=${this.token}`)
      this.typeList = data.data.unit_types
      const dataCard = await this.http.get(`/web/user/company/id_card_list?access_token=${this.token}`)
      console.log(dataCard)
      this.cardList = dataCard.data.id_cards
    },
    AddNewUser() {
      console.log(this.addUser)
      const params = this.addUser
      const idx = JSON.stringify(params)
      this.http.post(`/web/user/company/register?access_token=${this.token}`, idx).then(data => {
        console.log(data)
        if (data.result_code == '0') {
          this.$message({
            message: data.result_message,
            type: 'success'
          })
          this.getUserData()
          this.addUser = {}
          this.dialogFormAdd = false
        } else {
          this.$message({
            message: data.result_message,
            type: 'error'
          })
        }
      })
    },
    // 获取验证码
    async getCode() {
      console.log(this.addUser.legal_phone)
      if (this.addUser.legal_phone == '') {
        // 验证码发送消息提示
        this.$message({
          message: '请正确填写手机号',
          type: 'error'
        })
        return false
      } else {
        // 先获取图形验证码
        this.dialogImg = true
        const num = Math.ceil(Math.random() * 100)
        // 图片流转base64
        const data = await this.http.get(`/web/login/get-captcha?${num}`, { responseType: 'arraybuffer' })
        console.log(data)
        this.httpImg = 'data:image/png;base64,' + btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        // console.log(this.httpImg)
      }
    },
    // 验证码倒计时
    timeCodes() {
      if (this.timeCode.time > 0) {
        this.timeCode.disabled = true
        this.timeCode.txt = this.timeCode.time + 's'
        this.timeCode.time--
      } else {
        this.timeCode.disabled = false
        this.timeCode.txt = '获取'
        this.timeCode.time = 60
        return
      }
      setTimeout(() => {
        this.timeCodes()
      }, 1000)
    },
    // 点击刷新图形验证码(用随机数触发)
    async httpImgClick() {
      const num = Math.ceil(Math.random() * 100)
      const data = await this.http.get(`/web/login/get-captcha?${num}`, { responseType: 'arraybuffer' })
      this.httpImg = 'data:image/png;base64,' + btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
    },
    // 获取验证码
    async dialogImgClick() {
      if (this.imgCode) {
        // 获取验证码
        const codes = {
          account: this.addUser.legal_phone,
          send_code_type: 4,
          graph_code: this.imgCode
        }
        const codeList = JSON.stringify(codes)
        const data = await this.http.post(`/web/login/send-code?access_token=${this.token}`, codeList)
        console.log(data)
        if (data.result_code == '0') {
          this.imgCode = '' // 清空验证码
          this.dialogImg = false
          this.timeCodes()
          this.$message({
            message: '获取验证码成功！',
            type: 'success'
          })
        } else {
          this.$message({
            message: '获取验证码失败！',
            type: 'error'
          })
          const num = Math.ceil(Math.random() * 100)
          const datas = await this.http.get(`/web/login/get-captcha?${num}`, { responseType: 'arraybuffer' })
          this.httpImg = 'data:image/png;base64,' + btoa(new Uint8Array(datas).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        }
      }
    },
    //获取用户列表信息以及查询功能
    async getUserData(query = {}) {
      // 获取列表数据
      this.loading = true
      // 搜索时，页码需要设置为1，才能正确返回数据，因为数据是从第一页开始返回的
      query ? (this.pageData.currentPage = 1) : ''
      const params = {
        app_id: this.app_idHome,
        page: this.pageData.currentPage,
        size: 8,
        begin_time: query.startTime,
        end_time: query.endTime,
        user_name: query.queryData
      }
      const nums = JSON.stringify(params)
      const data = await this.http.post(`/web/user/company/user_list?access_token=${this.token}`, nums)
      console.log(data)
      this.loading = false
      if (data.result_code == '0') {
        const res = data.data
        this.pageData.tableData = res.records
        this.pageData.total = res.total
      }
    },
    // 获取appid
    async addId() {
      //获取用户Id
      const data = await this.http.get(`/web/app/appId?access_token=${this.token}&userId=${this.userid}`)
      console.log(data)
      if (data.result_code == '0') {
        this.optionsAppid = data.data.app
        this.app_idHome = this.optionsAppid[0].app_id
        this.getUserData()
        console.log(this.optionsAppid.length)
        if (this.optionsAppid.length !== 0) {
          this.showSelect = true
        } else {
          this.showSelect = false
        }
      }
    }
  },
  created() {
    this.addId()
  },
  computed: {
    ...mapState({
      userid: modules => modules.login.loginList.developer_id,
      token: modules => modules.login.loginList.token
    })
  }
}
</script>
<style scoped lang="scss">
.activeShow {
  display: none;
}
.activeBut {
  background: #fff600;
  // pointer-events: none;
}
/deep/.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border: 1px solid #c0c4cc;
}
#edit-but {
  /deep/.el-button--default {
    width: 100px;
  }
  /deep/.el-button + .el-button {
    margin-left: 50px;
  }
}

// 修改X号
/deep/.el-dialog__headerbtn {
  top: 12px;
}
/deep/.el-dialog__headerbtn .el-dialog__close {
  color: 20px;
}
/deep/.dialog-footer {
  text-align: center;
}
/deep/.el-dialog__header {
  padding-top: 10px;
}
/deep/.el-pager li {
  border: 1px solid #dcdfe6;
}
/deep/.el-pager li.active + li {
  border-left: 1px solid #dcdfe6;
}
/deep/ .el-pagination.is-background .el-pager li {
  background-color: #ffffff;
  color: #999999;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #23b769;
  color: #fff;
  border: 1px solid #23b769;
}
/deep/.el-button + .el-button {
  margin-left: 15px;
}
/deep/.el-button {
  width: 71px;
}
/deep/.el-button {
  padding: 8px 5px;
}
/deep/.el-button:hover {
  background: #23b769;
  color: #fff;
}
.mine {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .user-head {
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 50px 0 40px;
    .user-head-l {
      width: 40%;
      display: flex;
      align-items: center;
      .head-date {
        width: 35%;
        /deep/.el-input__inner {
          background: rgba(235, 248, 236, 1);
          border-radius: 6px;
          border: 1px solid rgba(35, 183, 105, 1);
          font-size: 18px;
          color: rgba(102, 102, 102, 1);
          letter-spacing: 1px;
        }
        /deep/.el-input__prefix {
          // right: -79%;
          .el-icon-date {
            font-size: 20px;
          }
        }
      }
      .head-text {
        font-size: 18px;
        font-family: NotoSansHans-Regular, NotoSansHans;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        letter-spacing: 1px;
        margin: 0 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .head-text:nth-child(1) {
        margin-left: 0;
      }
    }
    .user-head-r {
      width: 55%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .head-button {
        width: 100px;
        height: 40px;
        background: rgba(35, 183, 105, 1);
        border-radius: 6px;
        margin: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        cursor: pointer;
      }
      .head-r-l {
        display: flex;
        align-items: center;
        width: 60%;
        .head-input {
          /deep/.el-input__inner {
            background: rgba(235, 248, 236, 1);
            border-radius: 6px;
            border: 1px solid rgba(35, 183, 105, 1);
            font-size: 18px;
            color: rgba(102, 102, 102, 1);
            letter-spacing: 1px;
          }
        }
      }
    }
  }
  .mine-con {
    margin-top: 8px;
    // flex: 1;
    /deep/.el-table {
      max-height: 650px;
      height: 650px;
      overflow-y: auto;
    }
    .page {
      padding: 20px 0;
      display: flex;
      justify-content: center;
      background-color: #fff;
    }
  }

  /deep/.el-dialog {
    width: 35%;
    .el-dialog__body {
      padding-bottom: 30px;
    }
  }
  // 查看的弹框的样式
  #dialogTable {
    width: 95%;
    margin: 0 auto;
    padding-bottom: 10%;
    tr > td {
      font-size: 18px;
      font-weight: 400;
      padding: 10px 20px;
      letter-spacing: 1px;
      border: 1px solid rgba(216, 216, 216, 1);
    }
    tr > td:nth-child(2n) {
      width: 60%;
      color: rgba(63, 190, 113, 1);
    }
    tr > td:nth-child(2n-1) {
      width: 40%;
      color: rgba(136, 136, 136, 1);
    }
  }

  //修改弹框
  /deep/#edit {
    .el-dialog {
      width: 35%;
    }
    .el-dialog__header {
      .el-dialog__headerbtn {
        top: 11px;
        .el-icon-close {
          font-size: 30px;
          font-weight: 600;
          color: #999999;
        }
      }
    }
    .el-dialog__body {
      padding-bottom: 25px;
      .el-form-item {
        .el-select {
          width: 60%;
          .el-input {
            width: 100%;
          }
        }
        .el-form-item__label {
          width: 30%;
          padding-right: 20px;
          font-size: 18px;
          color: rgba(102, 102, 102, 1);
          letter-spacing: 1px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .el-input {
          width: 60%;
          background: rgba(235, 248, 236, 1);
          border-radius: 6px;
          border: 1px solid rgba(35, 183, 105, 1);
          input {
            font-size: 18px;
            color: #333;
            letter-spacing: 1px;
          }
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
      padding-bottom: 30px;
    }
  }

  //删除弹框
  /deep/#del-dialog {
    margin: 0 auto;
    margin-top: 20vh;
    .el-dialog__headerbtn {
      top: 11px;
      .el-icon-close {
        font-size: 30px;
        font-weight: 600;
        color: #999999;
      }
    }
    .el-dialog__header {
      height: 60px;
    }
    .el-dialog__body {
      padding: 10%;
      display: flex;
      justify-content: center;
      font-size: 18px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      letter-spacing: 1px;
    }
    .el-dialog__footer {
      padding-bottom: 45px;
      text-align: center;
      .el-button {
        border-radius: 6px;
      }
      .el-button:nth-child(2) {
        margin-left: 40px;
      }
      .el-button--default {
        background: rgba(35, 183, 105, 1);
        color: rgba(255, 255, 255, 1);
      }
      .el-button--primary {
        background: rgba(255, 255, 255, 1);
        color: rgba(35, 183, 105, 1);
        border: 1px solid rgba(35, 183, 105, 1);
      }
    }
  }
  // 查看的弹框的样式
  /deep/#preview {
    .el-dialog__header {
      .el-dialog__headerbtn {
        top: 11px;
        .el-icon-close {
          font-size: 30px;
          font-weight: 600;
          color: #999999;
        }
      }
    }
    .el-dialog__body {
      padding: 30px;
      padding-bottom: 60px;
    }
  }
  #dialogTable {
    width: 95%;
    margin: 0 auto;
    padding-bottom: 10%;
    tr > td {
      font-size: 18px;
      font-weight: 400;
      padding: 15px 20px;
      letter-spacing: 1px;
      border: 1px solid rgba(216, 216, 216, 1);
    }
    tr > td:nth-child(2n) {
      width: 60%;
      color: rgba(63, 190, 113, 1);
    }
    tr > td:nth-child(2n-1) {
      width: 40%;
      color: rgba(136, 136, 136, 1);
    }
  }
  /deep/#add {
    .el-dialog {
      width: 35%;
      height: 70%;
      overflow-y: auto;
    }
    .el-dialog__header {
      .el-dialog__headerbtn {
        top: 11px;
        .el-icon-close {
          font-size: 30px;
          font-weight: 600;
          color: #999999;
        }
      }
    }
    .el-dialog__body {
      padding-bottom: 25px;
      .el-form-item {
        .el-select {
          width: 60%;
          .el-input {
            width: 100%;
          }
        }
        .el-form-item__label {
          width: 30%;
          padding-right: 20px;
          font-size: 18px;
          color: rgba(102, 102, 102, 1);
          letter-spacing: 1px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .el-input {
          width: 60%;
          background: rgba(235, 248, 236, 1);
          border-radius: 6px;
          border: 1px solid rgba(35, 183, 105, 1);
          input {
            font-size: 18px;
            color: #333;
            letter-spacing: 1px;
          }
        }
      }
      .el-form-item.phone {
        .el-form-item__content {
          display: flex;
          align-items: center;
          .el-input {
            width: 65%;
          }
          .send {
            width: 16%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 4%;
            cursor: pointer;
            height: 100%;
            background: rgba(35, 183, 105, 1);
            border-radius: 6px;
            font-size: 18px;
            color: rgba(255, 255, 255, 1);
            letter-spacing: 1px;
          }
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
      padding-bottom: 30px;
    }
  }
  /deep/.el-dialog .el-input__inner {
    background-color: #ebf8ec;
    border: 0;
  }
  //表格的基本样式
  //标头的背景颜色
  /deep/.el-table th {
    background: #f7ffe9;
  }
  //表格的地边框去掉
  /deep/.el-table td,
  .el-table th.is-leaf {
    border-bottom: none;
  }
  //表格的高度
  /deep/ .el-table tr {
    height: 68px;
  }
  /deep/.el-checkbox__inner {
    width: 18px;
    height: 18px;
  }
  /deep/.el-checkbox__inner::after {
    border: 2px solid #fff;
    border-left: 0;
    border-top: 0;
    height: 11px;
    left: 5px;
    position: absolute;
    top: 0px;
    width: 6px;
  }
  // 选中表格的样式
  /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #fff;
    border: 1px solid #979797;
  }
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    background: rgba(216, 216, 216, 1);
    border: none;
  }
}
#add {
  /deep/.el-dialog__body .el-form-item:nth-child(4) .el-form-item__content .el-input {
    width: 85.8%;
  }
}
</style>
